<template>
  <div class="container">
    long list
    <div
      class="long-list-box"
      @scroll="onScroll"
    >
      <div
        :style="`padding-top: ${paddingTop}px;height: ${totalHeight}px;`"
      >
        <div
          class="list-item"
          v-for="(e, i) in visibleList"
          :key="`list-item-${i}`"
        >
        <icon-svg icon-name="baoxincai"></icon-svg> {{ e }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Download',
  data() {
    return {
      raw: Array(100000)
        .fill(0)
        .map((x, i) => `item - ${i}`),
      count: 10,
      start: 0,
      end: 10,
      itemHeight: 30,
      paddingTop: 0,
      totalHeight: 0
    }
  },
  computed: {
    visibleList() {
      return this.raw.slice(this.start, this.end)
    },
  },
  created() {
    this.totalHeight = this.raw.length * this.itemHeight
  },
  mounted() {
    this.count = Math.ceil(500 / this.itemHeight)
    this.end = this.start + this.count
  },
  methods: {
    onScroll(e) {
      this.start = Math.floor(e.target.scrollTop / this.itemHeight)
      this.end = this.start + this.count
      this.paddingTop = this.start * this.itemHeight
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  font-size: 1.285714rem;
}
.long-list-box {
  width: 350px;
  height: 500px;
  overflow: auto;
  border: 1px solid #dddddd;
  .list-item {
    border-bottom: 1px solid #999;
    cursor: pointer;
    height: 30px;
  }
}
</style>
